<template>
  <div>
    <el-dialog title="按单派车" :visible.sync="dispatchVisible" width="60%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 指派司机 -->
        <el-tab-pane label="指派司机" name="driver">
          <el-form v-model="driverForm">
            <div class="driverFormBox">
              <el-form-item>
                <el-select v-model="driverForm.region" placeholder="请选择查询方式">
                  <el-option label="司机姓名" value="name"></el-option>
                  <el-option label="司机手机号" value="phone"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="driverForm.name" autocomplete="off" placeholder="请输入关键字"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="driverForm.vehicleLicenseNumber" autocomplete="off" placeholder="请输入车牌号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" class="querybtn" @click="getdriverClick">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
          <!-- 司机表格区域 -->
          <vxe-table
            border
            resizable
            stripe
            highlight-hover-row
            highlight-current-row
            show-overflow
            height="300"
            align="center"
            ref="xTable1"
            :data="driverTableData"
            selection
          >
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="司机姓名" min-width="100"></vxe-table-column>
            <vxe-table-column field="phone" title="手机号码" min-width="100"></vxe-table-column>
            <vxe-table-column field="age" title="司机来源" min-width="100"></vxe-table-column>
            <vxe-table-column field="vehicleLoadVolumeCode" title="车辆可载平方" show-overflow min-width="120"></vxe-table-column>
            <vxe-table-column
              field="vehicleLoadWeightName"
              title="车辆可载重"
              show-overflow
              min-width="100"
            ></vxe-table-column>
            <vxe-table-column
              field="vehicleLicenseNumber"
              title="车牌号"
              show-overflow
              min-width="100"
            ></vxe-table-column>
            <vxe-table-column field="vehicleLengthName" title="车长" show-overflow min-width="100"></vxe-table-column>
            <vxe-table-column
              field="vehicleClassificationName"
              title="车型"
              show-overflow
              min-width="100"
            ></vxe-table-column>
          </vxe-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="driverSizeChange"
            @current-change="driverCurrentChange"
            :current-page="driverpage.pageNum"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
            :page-size="driverpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="driverpage.total"
          ></el-pagination>
        </el-tab-pane>
        <!-- 指派车队 -->
        <el-tab-pane label="指派车队" name="Fleet">
          <el-form v-model="fleetForm">
            <div class="driverFormBox">
              <el-form-item>
                <el-input v-model="fleetForm.nameORphone" autocomplete="off" placeholder="请输入名称或手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" class="querybtn" @click="getfleetClick">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
          <!-- 表格 -->
          <vxe-table
            border
            resizable
            stripe
            highlight-hover-row
            highlight-current-row
            show-overflow
            height="300"
            align="center"
            ref="xTable2"
            :data="fleetTableData"
          >
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column field="linkMan" title="车队名称" min-width="100"></vxe-table-column>
            <vxe-table-column field="phone" title="联系方式" min-width="100"></vxe-table-column>
            <vxe-table-column field="gmtCreated" title="更新时间" min-width="100" sortable></vxe-table-column>
            <vxe-table-column field="homeAddress" title="详细地址" min-width="150"></vxe-table-column>
          </vxe-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="fleetSizeChange"
            @current-change="fleetCurrentChange"
            :current-page="fleetpage.pageNum"
            :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
            :page-size="fleetpage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="fleetpage.total"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
      <div class="buttonBox">
        <el-button @click="dispatchVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderDispatch">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
import { getDriversList } from "@/api/ctms";

Vue.use(VXETable)
export default {

  data() {
    return {
        dispatchVisible: false, //派单对话框显示
      activeName: 'driver', //当前指派模式
      driverForm: {
        name:'',
        region:'',
      },
      driverTableData:[],
      driverpage:{
        pageNum: 1,
        pageSize: 10,
        total:0,
      },
      fleetForm:{},
      fleetTableData:[],
      fleetpage:{
        pageNum: 1,
        pageSize: 10,
        total:0,
      },
      params:{authStatus:3,workStatus:1,isFreeze:0,pageNum:1,pageSize:10},
      multipleSelection:[]
    }
  },
  methods: {
          // 获取司机列表
      driverList() {
          this.loading = true;
          this.params.driverType=0;
          return new Promise(resolve => {
            getDriversList(this.params).then(response => {
              this.driverTableData = response.data.records
              this.driverpage.total =  response.data.total
              this.loading = false;
            })
          })
      },
      //司机列表分页
     driverSizeChange(val) {
       this.params.pageSize = val
        this.driverList()

      },
      driverCurrentChange(val) {
        this.params.pageNum = val
        this.driverList()
      },
      fleetSizeChange(val) {
       this.params.pageSize = val
        this.driverList()

      },
      fleetCurrentChange(val) {
        this.params.pageNum = val
        this.driverList()
      },
    // 获取车队列表
      handleClick() {
        this.loading = true;
        this.params.driverType=1;
        return new Promise(resolve => {
          getDriversList(this.params).then(response => {
            this.fleetTableData = response.data.records
            this.fleetpage.total =  response.data.total
            this.loading = false;
          })
        })
      },
    //查询车队
    getfleetClick(){
      this.params.nameORphone=this.fleetForm.nameORphone;
      this.handleClick();
    },
    //查询司机
    getdriverClick(){
        if(this.driverForm.name != ''){
          if(this.driverForm.region=="name"){
            this.params.name=this.driverForm.name;
          }else {
            this.params.phone=this.driverForm.name;
          }
        }
       this.params.vehicleLicenseNumber=this.driverForm.vehicleLicenseNumber;
      this.driverList();
    },
    /*确定按钮，调用派单接口*/
    orderDispatch(){
      var driver="";
      var data=this.$refs.xTable1.selection;
      for(var i=0;i<data.length;i++){
        driver+=data[i].code+",";
      }
      var driverCode = driver.substring(0,driver.length-1);//司机code
      var orderCode=this.$parent.orderCode;//主单code
      var type=this.$parent.type;//0派单，1调单
      var params={orderCode:orderCode,driverCodes:driverCode,sign:type};
      return request({
        url: `/arpa-basic-api/ctmsOrderDispatch`,
        method: 'post',
        params: params
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.driverFormBox {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  .el-form-item {
    margin-right: 20px;
  }
  .querybtn {
    margin: -5px 0 0 0 !important;
  }
}
.buttonBox {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
</style>
